<!DOCTYPE html>
<html>
<head>
  <title>Paul's Google Cast Chrome Sender App</title>
  <link rel="stylesheet" type="text/css" href="../css/carff.css">
  <script type="text/javascript" src="https://www.gstatic.com/cv/js/sender/v1/cast_sender.js"></script>
  <script src="../js/carff.js"></script>
</head>
<body>
  <div>
    <div>
      <h2 style="display:block">Paul's Google Cast Chrome Sender App</h2>
      <div style="float:left; width:100%; margin:10px;">
        <h3 style="display: inline-block">Choose a media to cast</h3>
      </div>
      <br>
      <!-- Content Selection Section - with Volume Contoller -->
      <div style="width:80%; margin:10px;">
        <!-- List of content to cast -->
        <div style="margin:0px; float:left; width: 40%;">
           <input type="radio" checked name="media" onclick="selectMedia(0);">Big Buck Bunny MP4<br>
          <input type="radio" name="media" onclick="selectMedia(1);">Google Cast Intro GDL MOV<br>
          <input type="radio" name="media" onclick="selectMedia(2);">Google Cast Intro GDL HLS<br>
          <input type="radio" name="media" onclick="selectMedia(3);">Elephants Dream MP4<br>
          <input type="radio" name="media" onclick="selectMedia(4);">Tears of Steel MOV<br>
          <input type="radio" name="media" onclick="selectMedia(5);">Reel MP4<br>
          <input type="radio" name="media" onclick="selectMedia(6);">Google I/O 2011 MP3<br>
        </div>
        <!-- THUMBNAIL of the content to cast-->
        <div style="margin:0px; float:left; width:250px; height:200px">
         <div style="height:150px">
           <img src="../images/bunny.jpg" width="250" id="thumb">
         </div>
         <img src="../images/cast_icon_idle.png" id="casticon" width="30">
       </div>
       <!-- Vertical volume control -->
       <div style="margin-top:60px; float:left; width:20%;">
        <input class="vertical" type="range" min="0" max="100" step="1" onmouseup="setMediaVolume(1-this.value/100,false);">
        <div class="vertical">Volume control</div>
      </div>
    </div>
    <!-- App Control Section -->
    <div style=" margin:0px; float:left; display:block; width:90%;">
      <div style="margin:0px; float:left; width: 40%;">
        <h3>App Contols</h3><br>
        <button onclick="launchApp()">Launch app</button>
        <button onclick="stopApp()">Stop app</button>
        <br>
        <button onclick="loadMedia()">Load media</button>
        <button id="playpauseresume" onclick="playMedia()">Play</button>
        <button onclick="stopMedia()">Stop media</button>
        <span id="muteText">Mute media</span>
        <input type="checkbox" onclick="muteMedia(this);"> 
        <div>
          <div style="margin:10px;">
            Progress : <input id="progress" type="range" min="1" max="100" value="1" step="1" onmouseup="seekMedia(this.value);">
          </div>
          <div style="margin:10px;">
            State : <span id="playerstate">IDLE</span>
          </div>
        </div>
      </div>
      <!--  Pauls Receiver Selector -->
      <div style="margin:0px; float:left; width: 40%;">
       <div style="float:left; width:100%; margin:0px;">
        <h3 style="display: inline-block">Switch Receiver</h3>
        <p>Will automatically restart recevier.</p>
      </div>
      <div style="margin:0px; float:left; width: 90%;">
        <input type="radio" name="rcvr" onclick="selectRcvr(0);">pcarff-dmr<br>
        <input type="radio" name="rcvr" onclick="selectRcvr(1);">pcarff-smr<br>
        <input type="radio" name="rcvr" onclick="selectRcvr(2);">pcarff-smrcss<br>
        <input type="radio" checked name="rcvr" onclick="selectRcvr(3);">pcarff-cmr with HUD<br>
        <input type="radio" name="rcvr" onclick="selectRcvr(4);">pcarff-cmrmpl<br>
      </div>
    </div>
    <div style="margin:10px; float:left;">
      <textarea rows="20" cols="70" id="debugmessage">
      </textarea>
    </div>
  </div>

</body>
</html>
